<template>
  <div class="page-components">
    <div class="detail-info">
      <el-tabs v-model="tab" @tab-click="toggleTab">
        <el-tab-pane label="商品详情" name="0"></el-tab-pane>
        <el-tab-pane label="购买须知" name="1"></el-tab-pane>
      </el-tabs>
      <div class="page-content">
        <div class="tab-content">
          <div :class="['tabconten-item', tab == 0 ? 'isactive' : '']" v-if="tab == 0">
            <img class="item-img" :src="detailInfo.productDescription" mode="widthFix"/>
          </div>
          <div :class="['tabconten-item', tab == 1 ? 'isactive' : '']" v-if="tab == 1">
            <img class="item-img" :src="detailInfo.buyInstructions" mode="widthFix"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    className: {
      type: String,
      default: ''
    },
    detailInfo: {
      type: Object,
      default: {}
    }
  },
  data(){
    return {
        tab: 0
    }
  },
  methods:{
    // 切换tab
    toggleTab(tab, event) {
      
    }
  },
  mounted() {
    
  }
}
</script>

<!-- actionsheet lxa -->
<style lang='less' scoped>
@import '../../../css/common.less';
@import '../../../css/lxa.less';

.detail-info {
  margin-top: 0.26rem;
  background-color: #fff;
  .tab {
    height: 2.66rem;
    border-radius: 1.33rem;
    overflow: hidden;
    background-color: #fff;
    display: flex;

    .tab-item {
      width: 50%;
      height: 2.66rem;
      text-align: center;
      line-height: 2.66rem;
      font-size: 16px;

      &.selected {
        color: @orange;
        border-radius: 1.33rem;
      }
    }
  }
  .page-content {
    .tab-content {
      font-size: 16px;
      .tabconten-item {
        opacity: 0;

        &.isactive {
          opacity: 1;
        }
      }
      .item-img {
        width: 100%;
        // height: auto;
      }
    }
  }
}
  .el-tabs__item:hover{
    color:#333;
  }
</style>